<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="referrer" content="never">
		<title></title>
		<link rel="stylesheet" href="css/tabdemo.css" />
		<style>
			input {
				display: none;
			}

			.div1 {
				margin-top: 30px;
			}
		</style>
		<script src="js/jquery-3.5.1.min.js"></script>
	</head>
	<body>
		<div class="tabox">
			<input class="input1" />
			<input class="input2" />
			<div class="hd">
				<ul>
					<li class="on">即将上映</li>
					<li class=" ">Top250</li>
					<li class=" ">正在上映</li>
					<li class=" ">科幻大片</li>
					<li class=" ">欧美大片</li>
				</ul>
			</div>
			<div class="bd">
				<ul class="lh">
					<div class="div1"></div>
				</ul>
			</div>
		</div>
	</body>
	<script>
		$(function() {
			$("li").click(function() {

				$("li").eq($(this).index()).addClass("on").siblings().removeClass('on');
				$("ul").eq($(this).index() + 1).css("display", "").siblings().css("display", "none");
				//$($("ul").eq($(this).index() + 1).children()).remove();
				var array = new Array();
				array[0] = "https://douban.uieee.com/v2/movie/coming_soon";
				array[1] = "https://douban.uieee.com/v2/movie/top250";
				array[2] = "https://douban.uieee.com/v2/movie/in_theaters";
				array[3] = "https://douban.uieee.com/v2/book/search?q=科幻&count=8";
				array[4] = "https://douban.uieee.com/v2/music/search?q=欧美&count=15";

				$.ajax({
					url: array[$(this).index()],
					data: {
						start: $(".input1").val(),
						count: $(".input2").val()
					},
					dataType: "jsonp",
					success: (data) => {
						for (var i = 0; i < 5; i++) {
							if ($(this).index() < 3) {
								var images = data.subjects[i].images.small;
							}
							if ($(this).index() == 3) {
								var images = data.books[i].images.small;
							}
							if ($(this).index() == 4) {
								var images = data.musics[i].image.small;
							}
							// var images=data.subjects[i].images.small;
							var img = $("<div class='div2'><img src='' /></div>");
							$("ul").eq($(this).index() + 1).children().append(img);
							$($("img")[i]).attr("src", `${images}`);
							$($("img")[i]).css({
								"width": "110px",
								"height": "150px"
							});
							$(".div2").css({
								"float": "left",
								"width": "110px",
								"height": "190px",
								"margin-left": "50px"
							});

							var span = $("<br><div class='div3'></div>");
							$($("img")[i]).after(span);
							if ($(this).index() < 3) {
								$($(".div3")[i]).text(data.subjects[i].title);
							}
							if ($(this).index() == 3) {
								$($(".div3")[i]).text(data.books[i].title);
							}
							if ($(this).index() == 4) {
								$($(".div3")[i]).text(data.musics[i].title);
							}


						}
					},
				})
				$($("ul").eq($(this).index() + 1).siblings().children().children()).remove()
			})
		})
	</script>
</html>
